Send credentials when fetching the web app manifest (crossorigin="use-credentials")#4302
Send credentials when fetching the web app manifest (crossorigin="use-credentials")#4302m0sth8 wants to merge 1 commit into
Conversation
|
@m0sth8 is attempting to deploy a commit to the Umami Software Team on Vercel. A member of the Team first needs to authorize it. |
Greptile SummaryThis PR adds
Confidence Score: 4/5The fix is conceptually correct — adding credentials to the manifest fetch resolves the auth proxy CSP issue — but the attribute casing needs to be corrected before merging to avoid a potential build failure. The only change is a single JSX attribute on the manifest link. The credential-inclusion behaviour is correct and safe for same-origin deployments. The issue is that src/app/layout.tsx — attribute casing needs to change from Important Files Changed
Sequence DiagramsequenceDiagram
participant Browser
participant AuthProxy as Auth Proxy (ALB/OAuth2)
participant Umami
Note over Browser,Umami: Before this PR (no credentials on manifest fetch)
Browser->>AuthProxy: GET /site.webmanifest (no cookies)
AuthProxy->>Browser: 302 → identity provider (e.g. accounts.google.com)
Browser--xBrowser: CSP blocks cross-origin redirect
Note over Browser,Umami: After this PR (crossOrigin="use-credentials")
Browser->>AuthProxy: GET /site.webmanifest + session cookie
AuthProxy->>Umami: Forwards authenticated request
Umami->>Browser: 200 site.webmanifest
Reviews (1): Last reviewed commit: "Send credentials when fetching the web a..." | Re-trigger Greptile |
| <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> | ||
| <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> | ||
| <link rel="manifest" href="/site.webmanifest" /> | ||
| <link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials" /> |
There was a problem hiding this comment.
The JSX prop should be
crossOrigin (camelCase), not crossorigin (lowercase). React's TypeScript definitions (LinkHTMLAttributes) declare crossOrigin, so the lowercase spelling is an unknown property that will likely produce a TypeScript compile error. At runtime React may pass it through, but the camelCase form is the correct idiomatic JSX spelling and avoids any type-checking failure.
| <link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials" /> | |
| <link rel="manifest" href="/site.webmanifest" crossOrigin="use-credentials" /> |
Add crossOrigin="use-credentials" so the browser includes cookies when fetching /site.webmanifest. Without it the manifest request is sent unauthenticated and gets redirected to the login page by cookie-based auth proxies (ALB OIDC, OAuth2 Proxy, Cloudflare Access), which the browser then blocks against the app's own CSP.
2c2a322 to
196bdc0
Compare
What
Add
crossOrigin="use-credentials"to the web app manifest<link>so the browser sends cookies when fetching/site.webmanifest.Why
We run Umami as an internal-only service behind an AWS ALB with OIDC authentication (
authenticateon unauthenticated requests). Everything works except the manifest.Browsers fetch the web app manifest without credentials by default, unless the link tag opts in with
crossorigin="use-credentials"(crossOriginin JSX). So the manifest request arrives at our auth proxy with no session cookie, the proxy treats it as logged-out and 302-redirects it to the identity provider, and the browser then blocks the cross-origin redirect against Umami's own CSP (default-src 'self'):The dashboard itself is fine — this is just the manifest failing to load on every page — but it's a console error on every authenticated deployment behind a cookie-based auth proxy (OAuth2 Proxy, Cloudflare Access, ALB OIDC, Authelia, etc.).
use-credentialsmakes the browser include cookies, the proxy sees the session, and the manifest loads same-origin. It's a no-op for installs without an auth proxy.Prior art
The same one-line fix has been adopted by other self-hosted projects that hit this behind auth proxies:
crossorigin="use-credentials"to fetchmanifest.jsonwith cookies home-assistant/frontend#940Fix